<template>
    <el-container>
        <el-dialog
            :visible.sync="sv.dialog.show"
            :modal="false"
            width="100%"
            :fullscreen="true"
            :destroy-on-close="true"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            class="mev-dialog"
        >
            <el-main>
                <div id="allmap" :style="{ height: sv.dialog.height + 'px', width: '100%' }" style="z-index: 9999"></div>
            </el-main>
        </el-dialog>
    </el-container>
</template>

<script>
import Page from "../../../plugins/utils/page";
import CloseControl from "../../../plugins/mev/streetview/close_control";

export default {
    name: "StreetViewComponent",

    data() {
        return {
            sv: {
                dialog: {
                    show: true,
                    height: Page.getPageHeight() - 1
                }
            }
        };
    },

    methods: {
        toolbarFunc: function(method) {
            switch (method) {
                case "close": {
                    if (this.$route.name !== "EmptyComponent") {
                        this.$router.push({ name: "EmptyComponent" });
                    }
                    break;
                }

                default:
                    break;
            }
        }
    },

    mounted() {
        if (JavaContext.isNetOk()) {
            let that = this;
            this.$nextTick().then(() => {
                const strPosition = JavaContext.getCurrentGPS();
                let position = null;
                if (strPosition === "") {
                    position = {
                        lon: 116.3972,
                        lat: 39.9096
                    };
                } else {
                    position = JSON.parse(strPosition);
                }
                const point = new BMap.Point(position.lon, position.lat);
                const converter = new BMap.Convertor();
                const map = new BMap.Map("allmap");

                converter.translate([point], 1, 5, data => {
                    if (data.status === 0) {
                        let marker = new BMap.Marker(data.points[0]);
                        map.addOverlay(marker);
                        map.centerAndZoom(data.points[0], 12);
                        map.enableScrollWheelZoom(true);
                        // 覆盖区域图层测试
                        map.addTileLayer(new BMap.PanoramaCoverageLayer());
                    }
                });

                const closeControl = new CloseControl(that.$router, that.$route, map);
                map.addControl(closeControl);

                const stCtrl = new BMap.PanoramaControl(); //构造全景控件
                stCtrl.setOffset(new BMap.Size(90, 20));
                map.addControl(stCtrl); //添加全景控件
            });
        } else {
            this.$message({
                type: "warning",
                message: "当前未连接网络，无法使用街景",
                showClose: true
            });
            this.toolbarFunc("close");
        }
    }
};
</script>

<style scoped>
.el-container {
    color: #ffffff;
}

.mev-dialog >>> .el-dialog__header {
    padding: 0 0;
}

.mev-dialog >>> .el-dialog__body {
    margin: 0;
    padding: 0;
}

.el-main {
    margin: 0;
    padding: 0;
}
</style>
